| Vue 实现展开折叠效果 | 您所在的位置：网站首页 › vue 折叠 › Vue 实现展开折叠效果 |
|
效果参见：https://segmentfault.com/q/1010000011359250/a-1020000011360185 上述链接中，大佬给除了解决方法，再次进行总结，方便以后使用。 除了使用jQuery的方式实现上述效果，同样可以在Vue实现，下面是解决办法： 1、创建collapse.js文件 const elTransition = "0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out"; const Transition = { "before-enter"(el) { el.style.transition = elTransition; if (!el.dataset) el.dataset = {}; el.dataset.oldPaddingTop = el.style.paddingTop; el.dataset.oldPaddingBottom = el.style.paddingBottom; el.style.height = 0; el.style.paddingTop = 0; el.style.paddingBottom = 0; }, enter(el) { el.dataset.oldOverflow = el.style.overflow; if (el.scrollHeight !== 0) { el.style.height = el.scrollHeight + "px"; el.style.paddingTop = el.dataset.oldPaddingTop; el.style.paddingBottom = el.dataset.oldPaddingBottom; } else { el.style.height = ""; el.style.paddingTop = el.dataset.oldPaddingTop; el.style.paddingBottom = el.dataset.oldPaddingBottom; } el.style.overflow = "hidden"; }, "after-enter"(el) { el.style.transition = ""; el.style.height = ""; el.style.overflow = el.dataset.oldOverflow; }, "before-leave"(el) { if (!el.dataset) el.dataset = {}; el.dataset.oldPaddingTop = el.style.paddingTop; el.dataset.oldPaddingBottom = el.style.paddingBottom; el.dataset.oldOverflow = el.style.overflow; el.style.height = el.scrollHeight + "px"; el.style.overflow = "hidden"; }, leave(el) { if (el.scrollHeight !== 0) { el.style.transition = elTransition; el.style.height = 0; el.style.paddingTop = 0; el.style.paddingBottom = 0; } }, "after-leave"(el) { el.style.transition = ""; el.style.height = ""; el.style.overflow = el.dataset.oldOverflow; el.style.paddingTop = el.dataset.oldPaddingTop; el.style.paddingBottom = el.dataset.oldPaddingBottom; } }; export default { name: "collapseTransition", functional: true, render(h, { children }) { const data = { on: Transition }; return h("transition", data, children); } };2、在.vue组件中引入 展开/折叠 欢迎大家品尝Pizza! 这里有你非常喜欢的Pizza! import collapse from "../assets/js/collapse.js"; export default { data() { return { isActive: false }; }, components: { collapse } };
|
| CopyRight 2018-2019 实验室设备网 版权所有 |